<template>
  <div
    class="pull_wrap"
    :style="{
      padding: padding,
      'box-shadow': isBoxShadow ? '0px 18px 15px -15px rgba(192, 189, 216, 0.39)' : ''
    }"
  >
    <slot name="above" />

    <transition-group name="pull">
      <div v-if="isShow" key="default">
        <slot />
      </div>
      <div v-if="!isShow" key="inverse">
        <slot name="inverse" />
      </div>
    </transition-group>

    <slot name="below" />

    <div
      class="icon_wrap"
      :class="{ center: align == 'center' }"
      :style="{
        top: top,
        bottom: bottom,
        left: align == 'left' ? left : '',
        right: align == 'right' ? right : '',
        transform: `rotate(${isShow ? 0 : align == 'left' ? 180 : -180}deg)`
      }"
    >
      <i class="iconfont icon_pullUp" @click="isShow = !isShow"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pull',
  props: {
    initShow: {
      type: Boolean,
      default: true
    },
    isBoxShadow: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: 'center'
    },
    left: {
      type: String,
      default: '6px'
    },
    right: {
      type: String,
      default: '6px'
    },
    top: {
      type: String,
      default: ''
    },
    bottom: {
      type: String,
      default: '3px'
    },
    padding: {
      type: String,
      default: ''
    }
  },
  watch: {
    initShow: {
      handler(newVal) {
        this.isShow = newVal;
      },
      immediate: true
    }
  },
  data() {
    return {
      isShow: true
    };
  }
};
</script>

<style lang="scss" scoped>
.pull_wrap {
  position: relative;
}

.icon_wrap {
  position: absolute;
  transition: transform 0.3s;
  &.center {
    left: 50%;
    transform: translate(-50%);
  }
  .iconfont {
    font-size: 20px;
    font-weight: bold;
    color: $themeColor_IE;
    color: $themeColor;
    cursor: pointer;
  }
}

.pull-enter {
  opacity: 0;
  transform: translate(0, 100%);
}
.pull-leave-to {
  opacity: 0;
  transform: translate(0, 100%);
}
.pull-enter-active, .pull-leave-active{
  transition: all 0.3s;
}
</style>
